import React from 'react';
import {StyleSheet, Button, View, Image} from 'react-native';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
const logoImage = require('../assets/logo.png');
const TopHeader = ({navigation}) => {
  return (
    <View style={styles.header}>
      <View style={styles.logo}>
        <Image style={styles.tinyLogo} source={logoImage} />
      </View>
      <View style={styles.right}>
        <View style={styles.recharge}>
          <Button
            title="充值"
            color="#999"
            onPress={() => {
              navigation.navigate('RechargeScreen');
            }}
          />
        </View>
        <View style={styles.withdrawal}>
          <Button
            title="提現"
            color="#999"
            onPress={() => {
              navigation.navigate('WithdrawalScreen');
            }}
          />
        </View>
        <View style={styles.icon}>
          <MaterialCommunityIcons name="bell-outline" color="#000" size={38} />
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  header: {
    height: 44,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    flexDirection: 'row',
    paddingLeft: 10,
    paddingRight: 10,
    backgroundColor: '#D7D7D7',
  },
  logo: {
    width: 100,
    height: 40,
  },
  tinyLogo: {
    width: 100,
    height: 40,
  },
  right: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'flex-start',
    flexDirection: 'row',
  },
  recharge: {
    marginRight: 10,
  },
  withdrawal: {
    marginRight: 10,
  },
});

export default TopHeader;
